<template>
  <div>
    <div class="Flex-page">
      <header>
        <div class="wrapper">
          <span class="root">
            <img
              src="https://img.duozhuayu.com/8dfeaf34dbcc11ea862d22fb60d2f9c8.jpeg"
              alt=""
            />
          </span>
          <div class="contented">
            <div class="name">
              Amnesia
              <img
                src="https://asset.duozhuayu.com/oc/proposer_badge.png"
                alt=""
              />
            </div>
            <div class="desc">提案</div>
          </div>
        </div>
        <h1>{{ text }}</h1>
        <span>{{ sentence }}</span>
      </header>
      <div class="recommend">
        <span class="s1"> 9人推荐了10本书 </span>
      </div>
    </div>

    <div class="content-box">
      <div class="content">
        <div>
          <div class="oc-item">
            <div class="BookItem">
              <div class="BookItem-image">
                <div class="jsx-img"></div>
              </div>
              <div class="info">
                <h3>中华国学经典精粹·闲情笔记经典比读本:笑林广记</h3>
                <div class="score">游戏主人</div>
              </div>
            </div>
            <div class="Book-description">
              <div class="contrib-for-list">
                <p>哈哈哈哈 笑一笑嘛。在这种时候。</p>
                <div class="footer-recommend">
                  <div class="Flex-left">
                    <div>
                      <span class="small">
                        <img :src="url" />
                      </span>
                      <span>wxq的推荐</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="content">
        <div>
          <div class="oc-item">
            <div class="BookItem">
              <div class="BookItem-image">
                <div class="jsx-img"></div>
              </div>
              <div class="info">
                <h3>企鹅经典: 小彩虹 第一辑</h3>
                <div class="score">企鹅</div>
                <div class="book-rating">豆瓣评分 7.9</div>
              </div>
            </div>
            <div class="Book-description">
              <div class="contrib-for-list">
                <p>轻便易携带,看完直接揣进羽绒服口袋,真·口袋书。</p>
                <div class="footer-recommend">
                  <div class="Flex-left">
                    <div>
                      <span class="small">
                        <img :src="url" />
                      </span>
                      <span>Viexerunt.的推荐</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div>
          <div class="oc-item">
            <div class="BookItem">
              <div class="BookItem-image">
                <div class="jsx-img"></div>
              </div>
              <div class="info">
                <h3>金阁寺</h3>
                <div class="score">三岛由纪夫</div>
                <div class="book-rating">豆瓣评分 9.0</div>
              </div>
            </div>
            <div class="Book-description">
              <div class="contrib-for-list">
                <p>开本很适合在地铁上看，一页文库三岛由纪夫系列足以承包我很长一段时间的通勤日子</p>
                <div class="footer-recommend">
                  <div class="Flex-left">
                    <div>
                      <span class="small">
                        <img
                          src="https://img.duozhuayu.com/00d35a282bae11ec83cec66adabdc154.jpeg"
                          alt=""
                        />
                      </span>
                      <span>老羊的推荐</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
       <div class="content">
        <div>
          <div class="oc-item">
            <div class="BookItem">
              <div class="BookItem-image">
                <div class="jsx-img"></div>
              </div>
              <div class="info">
                <h3>看见</h3>
                <div class="score">柴静</div>
                <div class="book-rating">豆瓣评分 8.8</div>
              </div>
            </div>
            <div class="Book-description">
              <div class="contrib-for-list">
                <p>每次在地铁上读一篇都会产生一点思考，将你脱离现在的地方，而且时间也会过得很快</p>
                <div class="footer-recommend">
                  <div class="Flex-left">
                    <div>
                      <span class="small">
                        <img :src="url" />
                      </span>
                      <span>纪蒂的推荐</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <MyFooter class="myFooter" />
    <Back1/>
  </div>
</template>

<script>
import MyFooter from "../components/MyFooter.vue";
import Back1 from "../components/Back1.vue";
import axios from "axios";
export default {
  name: "NewBooksList",
  components: {
    MyFooter,
    Back1
  },
  data() {
    return {
      url: "",
      title: "",
      sentence: "",
      text: "",
    };
  },
  created() {
    axios({
      url: "http://localhost:3000/newbooks/" + this.$route.params.id,
    }).then((res) => {
      this.url = res.data.url;
      this.title = res.data.title;
      this.sentence = res.data.sentence;
      this.text = res.data.text;
    });
  },
};
</script>

<style scoped>
.myFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
}
.Flex-page {
  display: flex;
  padding: 0rem 0.15rem;
  justify-content: space-between;
  flex-direction: column;
  color: white;
  background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.6),
      rgb(0, 0, 0) 56%
    ),
  url(../../public/img/04.jpeg);
  background-size: cover, cover;
  background-position: center top, center center;
}
header {
  margin-top: 0.32rem;
  margin-bottom: 0.6rem;
}
.wrapper {
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 0.14rem;
  max-width: 100%;
}
.wrapper .root {
  flex-shrink: 0;
  width: 0.36rem;
  height: 0.36rem;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  background: rgb(242, 242, 242);
  border: 0.01rem solid rgb(242, 242, 242);
  border-radius: 0.99rem;
  overflow: hidden;
}
.wrapper .root img {
  display: block;
  width: 100%;
}
.content-box {
  background-color: white;
  padding-bottom: 1rem;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}
.wrapper .contented {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-left: 0.1rem;
  padding-right: 0.16rem;
  max-width: 100%;
}
.wrapper .contented .name {
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
  align-items: center;
  max-width: 100%;
  font-size: 0.16rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrapper .contented .desc {
  font-size: 0.12rem;
}
.wrapper .contented .name img {
  object-fit: contain;
  margin-left: 0.08rem;
  width: 0.84rem;
  border-style: none;
}
header h1 {
  margin-bottom: 0.12rem;
  font-size: 0.3rem;
  font-weight: 500;
}
header h1 span {
  line-height: 1.6;
}
.recommend {
  margin-bottom: 0.3rem;
  align-items: center;
}
.recommend .s1 {
  vertical-align: middle;
  font-size: inherit;
}
.content {
  background-color: white;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}
.oc-item {
  margin-top: 0.3rem;
  border-bottom: 0.005rem solid rgb(242, 242, 242);
  position: relative;
}
.BookItem {
  margin-left: 0.16rem;
  border-bottom: none;
  display: flex;
}
.BookItem-image {
  width: 0.8rem;
  height: 1.2rem;
  position: relative;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.12rem;
}
.jsx-img {
  background-image: url(../../public/img/05.jpeg);
  box-shadow: rgba(0, 0, 0, 0.1) 0rem 0rem 0.08rem 0rem;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
}
.info {
  display: flex;
  flex-direction: column;
}
.info h3 {
  margin-top: -0.1em;
  font-size: 0.18rem;
  font-weight: 500;
  margin-bottom: 0.06rem;
}
.info p {
  font-size: 0.12rem;
  color: rgb(170, 170, 170);
}

.info .score {
  color: rgb(170, 170, 170);
  font-size: 0.12rem;
}
.info .book-rating {
  color: rgb(214, 186, 140);
  font-size: 0.12rem;
}
.Book-description {
  padding: 0.16rem 0.16rem 0.26rem;
  border-bottom: 0rem;
}
.contrib-for-list p {
  line-height: 1.6;
  font-size: 0.15rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.footer-recommend {
  display: flex;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 1em;
  font-size: 0.14rem;
  color: rgb(170, 170, 170);
  white-space: nowrap;
  width: 100%;
}
.Flex-left {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  min-width: 0rem;
  margin-right: 0.04rem;
  color: rgb(170, 170, 170);
}
.Flex-left div {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.Flex-left div .small {
  flex-shrink: 0;
  width: 0.2rem;
  height: 0.2rem;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  background: rgb(242, 242, 242);
  border: 0.01rem solid rgb(242, 242, 242);
  border-radius: 0.99rem;
  overflow: hidden;
}
.Flex-left div .small img {
  display: block;
  width: 100%;
}
.Flex-left div .small span {
  margin-left: 0.04rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-box .content:nth-child(2) .jsx-img{
    background-image: url(../../public/img/06.jpeg);
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 8px 0px;
}
.content-box .content:nth-child(3) .jsx-img{
    background-image: url(../../public/img/07.jpeg);
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 8px 0px;
}
.content-box .content:nth-child(4) .jsx-img{
    background-image: url(../../public/img/08.jpeg);
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 8px 0px;
}
</style>